<template>
  <div class="box-container">
    <div class="Occlusion" v-if="isOcclusion">
      <slot name="Occlusion"></slot>
    </div>
    <div class="box" @mouseenter="show($event)" @mouseleave="hide($event)" :style="{ '--color1': props.colorArr[0], '--color2': props.colorArr[1] }">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  colorArr: {
    type: Array,
    required: true,
  },
  isOcclusion:{
    type:Boolean,
    default: false,

  }
});
function show(e) {
  e.target.classList.add("move");
  e.target.classList.remove("hide");
}
function hide(e) {
  e.target.classList.remove("move");
  e.target.classList.add("hide");
}
</script>

<style lang="less" scoped>
.box-container {
  width: 100%;
  height: 100%;
  position: relative;
  .Occlusion{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    cursor: no-drop;
  }
  .box {
    width: 100%;
    height: 100%;
    background-color: rgba(28, 35, 39, 1);
    padding: 3px;
    position: relative;
    text-align: center;
    cursor: pointer;
    box-shadow: 2px 2px 10px #3b3b3b;
    &::after {
      content: "";
      position: absolute;
      z-index: -2;
      background: linear-gradient(0deg, var(--color1), var(--color2));
      animation: moveAfter .5s linear forwards .5s;
      animation-play-state: paused;
    }
    &::before {
      content: "";
      position: absolute;
      background: linear-gradient(0deg, var(--color1), var(--color2));
      z-index: -1;
      animation: moveBefore 0.5s linear forwards;
      animation-play-state: paused;
    }
    

    &.move::before,
    &.move::after {
      animation-direction: normal;
      animation-play-state: running;
    }
    &.hide::before,
    &.hide::after {
      animation: none;
    }
  }
}
@keyframes moveBefore {
  0% {
    left: 0;
    top: -2%;
    width: 0%;
    height: 2%;
  }
  50% {
    left: 0;
    top: -2%;
    width: 103%;
    height: 2%;
  }
  100% {
    left: 0;
    top: -2%;
    width: 103%;
    height: 101%;
  }
}

@keyframes moveAfter {
  0% {
    left: 103%;
    top: 98%;
    width: 0;
    height: 4%;
  }
  50% {
    left: -2%;
    top: 98%;
    width: 105%;
    height: 4%;
  }
  100% {
    left: -2%;
    top: -2%;
    width: 105%;
    height: 104%;
  }
}
</style>